<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div data-bind="attr: {class: 'payment-method payment-method-' + getCode()}, css: {'_active': isActive()}">
    <div class="payment-method-title field choice">
        <input type="radio"
        name="payment[method]"
        class="radio"
        data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
        <label class="label" data-bind="attr: {'for': getCode()}">
            <span data-bind="text: getTitle()"></span>
        </label>
    </div>
    <div class="payment-method-content">
        <!-- ko foreach: getRegion('messages') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <div class="payment-method-billing-address">
            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
        <form id="co-transparent-form-braintree" class="form" data-bind="" method="post" action="#" novalidate="novalidate">
            <fieldset data-bind="attr: {class: 'fieldset payment items ccard ' + getCode(), id: 'payment_form_' + getCode()}">
                <legend class="legend">
                    <span><!-- ko i18n: 'Credit Card Information'--><!-- /ko --></span>
                </legend>
                <br>
                <div class="field type">
                    <div class="control">
                        <ul class="credit-card-types">
                            <!-- ko foreach: {data: getCcAvailableTypes(), as: 'item'} -->
                            <li class="item" data-bind="css: {
                                _active: $parent.selectedCardType() == item,
                                _inactive: $parent.selectedCardType() != null && $parent.selectedCardType() != item
                            } ">
                                <!--ko if: $parent.getIcons(item) -->
                                <img data-bind="attr: {
                                    'src': $parent.getIcons(item).url,
                                    'width': $parent.getIcons(item).width,
                                    'height': $parent.getIcons(item).height
                                }">
                                <!--/ko-->
                            </li>
                            <!--/ko-->
                        </ul>
                        <input type="hidden"
                               name="payment[cc_type]"
                               class="input-text"
                               value=""
                               data-bind="attr: {id: getCode() + '_cc_type', 'data-container': getCode() + '-cc-type'},
                                    value: creditCardType
                        ">
                    </div>
                </div>
                <div class="field number required">
                    <label data-bind="attr: {for: getCode() + '_cc_number'}" class="label">
                        <span><!-- ko i18n: 'Credit Card Number'--><!-- /ko --></span>
                    </label>
                    <div class="control">
                        <div data-bind="attr: {id: getCode() + '_cc_number'}" class="hosted-control"></div>
                        <div class="hosted-error"><!-- ko i18n: 'Please, enter valid Credit Card Number'--><!-- /ko --></div>
                    </div>
                </div>
                <div class="field number required">
                    <label data-bind="attr: {for: getCode() + '_expiration'}" class="label">
                        <span><!-- ko i18n: 'Expiration Date'--><!-- /ko --></span>
                    </label>
                    <div class="control">
                        <div class="hosted-date-wrap">
                            <div data-bind="attr: {id: getCode() + '_expirationMonth'}"
                                 class="hosted-control hosted-date"></div>

                            <div data-bind="attr: {id: getCode() + '_expirationYear'}"
                                 class="hosted-control hosted-date"></div>

                            <div class="hosted-error"><!-- ko i18n: 'Please, enter valid Expiration Date'--><!-- /ko --></div>
                        </div>
                    </div>
                </div>
                <!-- ko if: (hasVerification())-->
                <div class="field cvv required" data-bind="attr: {id: getCode() + '_cc_type_cvv_div'}">
                    <label data-bind="attr: {for: getCode() + '_cc_cid'}" class="label">
                        <span><!-- ko i18n: 'Card Verification Number'--><!-- /ko --></span>
                    </label>
                    <div class="control _with-tooltip">
                        <div data-bind="attr: {id: getCode() + '_cc_cid'}" class="hosted-control hosted-cid"></div>
                        <div class="hosted-error"><!-- ko i18n: 'Please, enter valid Card Verification Number'--><!-- /ko --></div>

                        <div class="field-tooltip toggle">
                            <span class="field-tooltip-action action-cvv"
                                  tabindex="0"
                                  data-toggle="dropdown"
                                  data-bind="attr: {title: $t('What is this?')}, mageInit: {'dropdown':{'activeClass': '_active'}}">
                                <span><!-- ko i18n: 'What is this?'--><!-- /ko --></span>
                            </span>
                            <div class="field-tooltip-content"
                                 data-target="dropdown"
                                 data-bind="html: getCvvImageHtml()"></div>
                        </div>
                    </div>
                </div>
                <!-- /ko -->
                <!-- ko if: (isVaultEnabled())-->
                <div class="field">
                    <input type="checkbox"
                           name="vault[is_enabled]"
                           class="checkbox-inline"
                           data-bind="attr: {'id': getCode() + '_vault_enabler'}, checked: vaultEnabler.isActivePaymentTokenEnabler"/>
                    <label class="label" data-bind="attr: {'for': getCode() + '_vault_enabler'}">
                        <span><!-- ko i18n: 'Save for later use.'--><!-- /ko --></span>
                    </label>
                    <div class="control _with-tooltip">
                        <div class="field-tooltip toggle">
                            <span class="field-tooltip-action action-vault"
                                  tabindex="0"
                                  data-toggle="dropdown"
                                  data-bind="attr: {title: $t('What is this?')}, mageInit: {'dropdown':{'activeClass': '_active'}}">
                                <span translate="'What is this?'"></span>
                            </span>
                            <div class="field-tooltip-content"
                                 data-target="dropdown"
                                 translate="'We store you payment information securely on Braintree servers via SSL.'"></div>
                        </div>
                    </div>
                </div>
                <!-- /ko -->
            </fieldset>
            <input type="submit" id="braintree_submit"  style="display:none" />
        </form>
        <div class="actions-toolbar">
            <div class="primary">
                <button class="action primary checkout"
                        type="submit"
                        data-bind="
                        click: placeOrderClick,
                        attr: {title: $t('Place Order')}
                ">
                    <span data-bind="i18n: 'Place Order'"></span>
                </button>
            </div>
        </div>
    </div>
</div>